<template>
  <div>
    <div class="list">
      <p>{{ notice }}</p>
    </div>
    <audio-video-call ref="audioVideoCallRef" :is-show="showCall" />
    <div
      v-show="isSmallWindow"
      id="chat-sub-window"
      @click="handleScaleWindow"
    ></div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import audioVideoCall from './components/audioVideoCall';
import WebRTCCall, { initWebRTC2 } from '@/utils/webIM/WebRTCCall';

export default {
  name: 'imChat',
  components: {
    audioVideoCall
  },
  data() {
    return {
      a: 1,
      notice:
        '1.医师意见仅视为健康咨询，不能作为诊断和医疗依据，因此蛮牛健康不承担任何由此引起的法律责任。\\n2.咨询过程中生成的诊疗意见，会自动存储到健康档案内。\\n3.用户提交问题成功后，医生将在24小时内接诊；医生完成服务后将关闭该订单，最晚于48小时后自动关闭订单。\\n4.用户提交问题成功后，若24小时内未有医生接诊或医生接诊后48小时内未提供服务，平台将自动为您退款。\\n5.问诊订单提交后，医生未接诊前可主动取消和退款；医生接诊后不支持取消和退款。\\n6.您可以在“我的→我的问诊”中及时查看医生回复状态。\\n7.如有任何问题欢迎拨打客服热线：021-31217203。'
    };
  },
  computed: {
    ...mapGetters({
      showCall: 'videoCall/showCall',
      isSmallWindow: 'videoCall/isSmallWindow',
      isVideo: 'videoCall/isVideo'
    }),
    noticeText() {
      return this.notice ? this.notice.replace(/\n/g, '<br>') : '';
    }
  },
  watch: {
    '$store.state.videoCall.isSmallWindow'(newVal) {
      if (newVal && WebRTCCall.remoteStream) {
        this.playRStream();
      }
    }
  },
  methods: {
    playRStream() {
      this.$nextTick(() => {
        const div = document.getElementById('chat-sub-window');
        WebRTCCall.remoteStream.play(div).then(() => {
          WebRTCCall.remoteStream
            .setLocalRenderMode({
              // 设置视频窗口大小
              width: div.clientWidth,
              height: div.clientHeight,
              cut: true // 是否裁剪
            })
            .catch(() => {
              console.log('playRStream-播放视频失败');
            });
        });
      });
    },
    handleScaleWindow() {
      this.$store.commit('videoCall/setSmallWindow', false);
      this.$store.commit('videoCall/setShowCall', true);
    }
  },
  mounted() {
    initWebRTC2('bb97443c3ee869f228e9bf8080fb29ab');
  },
  beforeRouteLeave(to, from, next) {
    if (this.showCall) {
      this.$store.commit('videoCall/setShowCall', false);
      if (this.isVideo && WebRTCCall.remoteStream) {
        this.$store.commit('videoCall/setSmallWindow', true);
      }
      next(false);
    } else {
      next();
    }
  }
};
</script>

<style lang="scss" scoped>
.aa {
  margin-top: 10px;
}
#chat-sub-window {
  background: #f8fafd;
  position: absolute;
  z-index: 100;
  right: 0;
  top: 80px;
  width: 91px;
  height: 160px;
}
</style>
